<template>
  <!--租房分期-->
  <el-main>
    <el-card class="box-card" style="margin: 20px 0">
      <div slot="header" class="clearfix">
        <span>申请主体信息</span>
      </div>
      <div>
        <el-form ref="elForm" :model="business" size="mini" label-width="100px">
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="公寓名称">
                <span v-html="business.name"></span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label-width="120px" label="类型">
                <span v-if="business.type==0">个人职业房东</span>
                <span v-else>公司化公寓</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="公司名称">
                <span v-html="business.name"></span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label-width="120px" label="联系人">
                <span v-html="business.name"></span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="申请时间">
                <span v-html="business.createTime"></span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label-width="120px" label="法人姓名">
                <span v-html="business.corporation"></span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="法人身份证">
                <span v-html="business.certNum"></span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label-width="120px" label="公司地址">
                <span v-html="business.address"></span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="账户类型">
                <span v-html="companyAccountDetail.accountType"></span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label-width="120px" label="账户">
                <span v-html="companyAccountDetail.brankId"></span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="开户行">
                <span v-html="companyAccountDetail.brankName"></span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="法人身份证">
                <img :src="business.certPicture" height="60px">
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-card>

    <el-card class="box-card" style="margin: 20px 0">
      <div slot="header" class="clearfix">
        <span>贷款详细信息</span>
      </div>
      <div>
        <el-form ref="elForm" :model="sfContract" size="mini" label-width="100px">
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="业主姓名">
                <span v-html="sfContract.ownerName"></span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label-width="120px" label="业主身份证号">
                <span v-html="sfContract.ownerIdCard"></span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="业主手机号">
                <span v-html="sfContract.ownerMobile"></span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label-width="120px" label="业主银行卡号">
                <span v-html="sfContract.bankCardNumber"></span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="业主开户行">
                <span v-html="sfContract.bankOpen"></span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label-width="120px" label="租金合计">
                <span>{{loan.rpAmountCount}} 元</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="借款金额">
                <span>{{loan.reLeaseCount}} 元</span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label-width="120px" label="贷款利息">
                <span>{{loan.agInterestRate}} 元 (年化利率{{ loan.rate }}%)</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="一次性服务费">
                <span>{{loan.serCharge}} 元</span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label-width="120px" label="还款周期">
                <span>{{sfContract.paymentType}} 个月</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="贷款起始时期">
                <span v-html="sfContract.leaseStartTime"></span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label-width="120px" label="贷款终止时期">
                <span v-html="sfContract.leaseEndTime"></span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label-width="120px" label="周期还款金额">
                <span>{{cycleAmount}} 元</span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label-width="120px" label="还款账期">
                <span>{{num}} 个月</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label-width="120px" label="房产证">
              <img v-for="item in sfDHouse" :src="item.url" height="60px">
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label-width="120px" label="房贷合同">
              <img v-for="item in sfDContractUrl" :src="item.url" height="60px">
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label-width="120px" label="业主身份证">
              <img v-for="item in ownerUrl" :src="item.url" height="60px">
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item label-width="120px" label="业主银行卡">
              <img v-for="item in sfDBank" :src="item.url" height="60px">
            </el-form-item>
          </el-row>
        </el-form>
      </div>
    </el-card>
    <div style="padding: 5px;text-align: center">
      <el-button type="warning" style="margin: 10px" v-if="loan.applyState == 1" @click="checks1(2)">初审通过</el-button>
      <el-button type="warning" style="margin: 10px" v-if="loan.applyState == 1" @click="dialogFormVisible=true">初审不通过</el-button>
      <el-button type="warning" style="margin: 10px" v-if="loan.applyState == 2" @click="checks1(4)">复审通过</el-button>
      <el-button type="warning" style="margin: 10px" v-if="loan.applyState == 2" @click="dialogFormVisible=true">复审不通过</el-button>
    </div>
    <!--    审核不通过弹窗-->
    <el-dialog title="审核不通过原因" :visible.sync="dialogFormVisible">
      <el-form :model="check">
        <el-form-item label="审核不通过原因" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="check.auditMemo" autocomplete="off" placeholder="请输入审核不通过原因"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button v-if="loan.applyState == 1" type="primary" @click="dialogFormVisible = false, checks1(3)">确 定</el-button>
        <el-button v-if="loan.applyState == 2" type="primary" @click="dialogFormVisible = false, checks1(5)">确 定</el-button>
      </div>
    </el-dialog>

  </el-main>
</template>

<script>
import {checks, collectmortgageData} from "@/api/banking/applicationscheck/applicationscheck";


export default {
  name: "collectmortgage",
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: '120px',
      id:undefined,
      //周期还款金额
      cycleAmount:undefined,
      //合同详情
      sfContract: {},
      //合同图片
      sfDContractUrl:[],
      //房产证图片
      sfDHouse:[],
      //业主身份证
      ownerUrl:[],
      //业主银行卡
      sfDBank:[],
      //商户主体
      business:{},
      //账户
      companyAccountDetail:{},
      //贷款
      loan:{},
      //期数
      num:undefined,

      //审核用
      check:{
        productType:2,
        applyState:undefined,
        checkId:undefined,
        auditMemo:undefined,
      }
    }
  },
  methods:{
    initData(){
      collectmortgageData({id:this.id}).then(res=>{
        console.log(res.msgData)
        var data = res.msgData;
        this.business = data.business;
        this.companyAccountDetail = data.companyAccountDetail || {}
        this.sfContract = data.sfContract
        this.sfDContractUrl = data.sfDContractUrl
        this.sfDHouse = data.sfDHouse
        this.ownerUrl = data.ownerUrl
        this.sfDBank = data.sfDBank
        this.rateCount = data.rateCount
        this.loan = data.loan;
        this.num = data.num;
        this.check.applyState = data.loan.applyState;
        this.check.checkId = data.loan.id;

        this.cycleAmount = data.cycleAmount

        console.log("check",this.check)
      })
    },
    checks1(applyState){
      this.check.applyState = applyState;
      console.log("check",this.check)
      checks(this.check).then(res=>{
        // 完成按钮
        this.$message.success("审核成功")
        const obj = { path: "/banking/applicationscheck"};
        this.$tab.closeOpenPage(obj);
      })
    },
  },

  created() {
    this.id = this.$route.params.id
    this.initData()
  }
}
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 960px;
}
</style>
